<template>
  <div class="outer">
    <van-nav-bar :border="false">
      <template #left>
        <van-icon
          name="arrow-left"
          size="30"
          color="#fff"
          @click="back"
          class="back"
        />
      </template>
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
          theme="dark"
        >
          <template #reference>
            <van-icon name="more" size="35" color="#444" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <!-- <van-cell title="显示分享面板" /> -->


    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      name="share_sheet"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, Icon, Popover, ShareSheet} from "vant";

Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Popover).use(ShareSheet);

export default {
  name: "NavBra",

  data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
        { text: "购物车", icon: "shopping-cart-o" },
        { text: "分类", icon: "apps-o" },
        { text: "我的嗨购", icon: "user-circle-o" },
      ],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },

  mounted() {},

  methods: {
    back() {
      this.$router.go(-1);
    },
    onSelect(action, index) {
    //   console.log(action.text);
      switch (index) {
         case 0:
          this.$router.push("/home");
          break;
        case 2:
          this.$router.push("/cart");
          break;
        case 3:
          this.$router.push("/sort");
          break;
        case 4:
          this.$router.push("/mine");
          break;
        case 1:
            this.showShare = true;
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style  scoped>
.van-nav-bar {
  position: relative;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0);
}
.back {
  width: 0.35rem;
  height: 0.35rem;
  background-color: #444;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 0.35rem;
}
</style>